<template>
  <div class="billList projectDepartment">
    <div v-if="orgId" class="back" @click="goBack">
        <el-button icon="el-icon-d-arrow-left">返回</el-button>
    </div>
    <div class="title"> {{ searchForm.orgName }}-分类、汇总台账 </div>
    <TopSearch @search="search"></TopSearch>
    <el-table
        ref="table"
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        highlight-current-row
        class="table"
        row-key="billId"
        :tree-props="{
            children: 'children',
            hasChildren: 'hasChildren',
        }"
    >
        <el-table-column label="物资类别" prop="materialClassName" show-overflow-tooltip min-width="200" align="left"></el-table-column>
        <el-table-column label="物资名称" prop="materialName" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column label="规格型号" prop="spec" show-overflow-tooltip width="100"></el-table-column>
        <el-table-column label="材质" prop="texture	" show-overflow-tooltip width="100"></el-table-column>
        <el-table-column label="单位" prop="unit" show-overflow-tooltip width="100"></el-table-column>
        <el-table-column label="单据日期" prop="billDate" show-overflow-tooltip width="125"></el-table-column>
        <el-table-column label="凭证种类" prop="proofType" show-overflow-tooltip width="125"></el-table-column>
        <el-table-column label="机材凭证编号" prop="billNo" show-overflow-tooltip width="125"></el-table-column>
        <el-table-column label="摘要" prop="remarks" show-overflow-tooltip width="100"></el-table-column>
        <el-table-column label="借方" show-overflow-tooltip>
            <el-table-column label="数量" prop="debtorQty" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="单价" prop="debtorPrice" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="金额" prop="debtorAmount" width="100" show-overflow-tooltip></el-table-column>
        </el-table-column>
        <el-table-column label="贷方" show-overflow-tooltip>
                <el-table-column label="数量" prop="creditorQty" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column label="单价" prop="creditorPrice" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column label="金额" prop="creditorAmount" width="100" show-overflow-tooltip></el-table-column>
        </el-table-column>
        <el-table-column label="余额" show-overflow-tooltip>
            <el-table-column label="数量" prop="balanceQty" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="单价" prop="balancePrice" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="金额" prop="balanceAmount" width="100" show-overflow-tooltip></el-table-column>
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
import TopSearch from '@/pages/comprehensiveReport/materialReport/components/topSearch.vue'
import {  getUuid, parseList, showLoading, hideLoading } from '@/utils/common'
import { mapState } from 'vuex'
import request from '@/api/comprehensiveReport/subsummaryLedger'
export default {
    props: ['orgId', 'orgName'],
    data () {
        return {
            tableData: [],
            searchForm: {
                endDate: '',
                materialCategoryId: '',
                materialName: '',
                spec: '',
                startDate: '',
                orgId: ''
            },
            mapObj: {},
        }
    },
    components: {
        TopSearch
    },
    watch: {
        orgId: {
            handler (newName) {
                this.searchForm.orgId = newName
                this.searchForm.orgName = this.orgName
                this.getList()
            },
            immediate: true,
            deep: true
        },
    },
    computed: {
        ...mapState({
            orgInfo: state => state.userInfo.orgInfo
        }),
    },
    mounted () {
        if(!this.orgId && localStorage.getItem('searchOrgId')) {
            this.searchForm.orgId = localStorage.getItem('searchOrgId')
            this.searchForm.orgName = localStorage.getItem('searchOrgOrgName')
            this.getList()
        }else if(!this.orgId &&  this.orgInfo.orgId) {
            this.searchForm.orgId = this.orgInfo.orgId
            this.searchForm.orgName = this.orgInfo.orgName
            this.getList()
        }
    },
    methods: {
        objectSpanMethod ({ rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex  === 0) {
                    return {
                        rowspan: 1,
                        colspan: 4
                    }
                }
            }
        },
        search (params) {
            const obj = {
                endDate: params.endDate,
                materialCategoryId: params.materialCategoryId,
                materialName: params.materialName,
                spec: params.spec,
                startDate: params.startDate,
                orgId: params.orgId,
            }
            this.searchForm = obj
            this.getList()
        },
        getList () {
            showLoading()
            request.getprojectcompany(this.searchForm).then(res => {
                if(!res.code) {
                    if(res.length > 0) {
                        const arr =  parseList(res, 'billId', 'parentId', '0')
                        let count = {
                    	'balanceAmount': 0,
                            'balancePrice': '',
                            'balanceQty': '',
                            'billDate': '',
                            'billId': getUuid(),
                            'billNo': '',
                            'creditorAmount': 0,
                            'creditorPrice': '',
                            'creditorQty': '',
                            'debtorAmount': 0,
                            'debtorPrice': '',
                            'debtorQty': '',
                            'finanaceProof': '',
                            'materialClassName': '合计',
                            'materialName': '',
                            'parentId': '',
                            'proofType': '',
                            'remarks': '',
                            'spec': '',
                            'texture': '',
                            'type': '',
                            'unit': ''
                        }
                        arr.forEach(x=>{
                            count.debtorAmount += x.debtorAmount //借方金额
                            count.creditorAmount += x.creditorAmount //贷方金额
                            count.balanceAmount += x.balanceAmount //余额金额
                        })
                        this.tableData = [
                            count,
                            ...arr
                        ]
                    }else{
                        this.tableData = []
                    }
                    console.log('🚀 ~ this.tableData', this.tableData)
                }
                hideLoading()
            }).catch(()=>{
                hideLoading()
            })
        },
        //明细数据汇总方法
        uniqueArray (arr, key) {
            const map = new Map()
            return arr.filter(item => {
                const val = item[key] + '' || getUuid()
                return !map.has(val) && map.set(val, 1)
            })
        },
        count_ (obj) {
            return obj.children.reduce((prev, c) => {
                if(c.changeType === -1) {
                    return prev
                }else{
                    prev = (parseFloat(prev) + parseFloat(c.amount) || 0).toFixed(2)
                    return prev
                }
            }, 0)
        },
        goBack () {
            this.$emit('cancel')
        }
    }

}
</script>

<style lang="scss" scoped>
.projectDepartment{
    ::v-deep .el-table__body-wrapper{
        tbody{
            .el-table__row:nth-child(1){
                font-weight: 700;
                td:nth-child(1){
                    text-align: center;
                }
                td:nth-child(2){
                    display: none;
                }
                td:nth-child(3){
                    display: none;
                }
                td:nth-child(4){
                    display: none;
                }
            }
        }
    }
    .title{
        font-size: 22px;
        margin: 30px;
        margin-top: 20px;
        text-align: center;
    }
}

</style>